<!-- 评论 -->
<template>
	<view>
		<view class="list-view">
			<view class="user-avatar-view">
				<up-avatar :src="instashotData.avatar || 'https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E9%9A%8F%E6%89%8B%E6%8B%8D/u15.png'" size="40"></up-avatar>
				<view class="user-info">
					<view class="user-name">{{instashotData.realName}}</view>
					<view class="user-unit">{{instashotData.orgName || ''}}</view>
				</view>
			</view>
			<view class="title">
				{{instashotData.description}}
			</view>
				
			<view class="img-wrap" v-if="instashotData.fileUrl.length > 0">
				<up-image v-for="(file, i) in instashotData.fileUrl" :key="i" 
				:src="file || defaultImg" radius="10" width="208rpx" height="200rpx"
				@tap.stop="previewImage(instashotData.fileUrl, i)"></up-image>
					
			</view>
		<!-- 	<view class="img-wrap" v-else>
				<up-image src="https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E9%9A%8F%E6%89%8B%E6%8B%8D/u15.png" radius="10" width="208rpx" height="200rpx"></up-image>
				<up-image src="https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E9%9A%8F%E6%89%8B%E6%8B%8D/u15.png" radius="10" width="208rpx" height="200rpx"></up-image>
				<up-image src="https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E9%9A%8F%E6%89%8B%E6%8B%8D/u15.png" radius="10" width="208rpx" height="200rpx"></up-image>
				
			</view> -->
		
			<view class="bottom-info">
				<view class="name">{{instashotData.createTime}}</view>
				<view class="option-view">
					<view class="option-item" @click="getUp">
						<view class="option-item" @click.stop="getComment">
							<up-icon name="chat" color="#999" size="20"></up-icon>
							<view>{{instashotData.comments}}</view>
						</view>
						<up-icon v-if="!instashotData.selfLike" name="thumb-up" color="#999" size="20"></up-icon>
						<up-icon v-else name="thumb-up-fill" color="#d81e06" size="20"></up-icon>
						<view>{{instashotData.likes}}</view>
					</view>
					
				</view>
			</view>
			<up-gap height="15"></up-gap>
			<view class="comment-view">
				<view class="title">全部评论</view>
				<view class="comment-item" v-for="(com, index) in instashotData.userCommentVOList" :key="index">
					<!-- likes -->
					<view class="thumb-view">
						<view class="name">{{com.realName}}</view>
						<view class="option-item" @click.stop="getUpLike(com)">
							<up-icon v-if="!com.selfLike" name="thumb-up" color="#999" size="20"></up-icon>
							<up-icon v-else name="thumb-up-fill" color="#d81e06" size="20"></up-icon>
							<view>{{com.likes}}</view>
						</view>
					</view>
					<view class="content">{{com.commentContents}}</view>
					<view class="bottom-view">
						<view class="time">{{com.createTime}}</view>
						<view class="delect" @tap="delectComment(com.id)">删除</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 评论输入input  -->
		<view class="commentInputView" v-if="show">
			<view class="commentInput">
				<view style="display: flex;align-items: flex-end">
					<up-input
						  placeholder="说点什么~"
						  border="surround"
						  style="background-color: #fff;"
						  v-model="commentParams.commentContents"
						></up-input>
					<button @click="submitComment" class="submit">发送</button>
				</view>
			</view>
		   
		</view>
	</view>
</template>

<script>
	import { activityApi } from '@/api/activity/activity-app.js';
	export default {
		data () {
			return {
				instashotData: {
					description: '',
					fileUrl: [],
					realName: '',
					likes: 0,
					comments: 0,
					createTime: '',
					userCommentVOList: [{
						realName: '张三',
						commentContents: '你好',
						createTime: '2025-03-30'
					},{
						realName: '张三',
						commentContents: '你好',
						createTime: '2025-03-30'
					}]
				},
				id: '',
				commentParams: {
				  "snapshotId": 0,
				  "commentContents": ""
				},
				show: false,
			}
		},
		onLoad(options) {
			this.id = options.id
			this.commentParams.snapshotId = options.id
			this.getDetail()
			// const data = JSON.parse(decodeURIComponent(options.params));
			// this.instashotData = data
		},
		methods: { // commentDetail
			async getDetail() {
				const result = await activityApi.commentDetail(this.id)
				this.instashotData = result.data
				
			},
			previewImage(images, currentIndex) {
			  uni.previewImage({
				current: currentIndex, // 当前显示图片的索引
				urls: images // 需要预览的图片链接列表
			  });
			},
			getComment() {
				this.commentParams.commentContents = ''
				this.show = true
			},
			async submitComment() {
				if (this.commentParams.commentContents) {
					const result = await activityApi.applyComment(this.commentParams)
					this.instashotData.comment = this.instashotData.comment + 1
					this.show = false
					this.getDetail()
				} else {
					uni.showToast({
						icon: 'none',
						title: '请输入',
					});
				}
			},
			async getUp() {
				const result = await activityApi.snapshotGiveOrCancel(this.id)
				this.getDetail()
				// this.instashotData.selfLike = !this.instashotData.selfLike
				// this.instashotData.likes = this.instashotData.selfLike?item.likes + 1:this.instashotData.likes - 1
				
			},
			async getUpLike(item) {
				const result = await activityApi.commentLike(item.id)
				this.getDetail()
				// item.selfLike = !item.selfLike
				// item.likes = item.selfLike?item.likes + 1:item.likes - 1
				
			},
			// 删除评论
			async delectComment(id) {
				const result = await activityApi.removeComment(id)
				this.getDetail()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-view {
		padding: 30rpx 30rpx 200rpx 30rpx;
		.title {
			font-size: 32rpx;
			margin: 30rpx 0;
		}
		.img-wrap {
			display: flex;
			flex-wrap: wrap;
			margin: 20rpx 0;
			.u-transition {
				margin-bottom: 20rpx;
			}
			.u-transition:nth-child(2) {
				margin: 0 30rpx;
			}
			.u-transition:nth-child(5) {
				margin: 0 30rpx;
			}
		} 
		.img-wrap::after {
		    height: 0;
		    visibility: hidden;
		}
		.bottom-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			color: $uni-text-color-grey;
			.option-view {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.option-item {
					display: flex;
					align-items: center;
					margin: 0 20rpx;
				}
			}
		}
	}
	.comment-view {
	 
		.title {
			font-size: 36rpx;
			font-weight: 700;
			margin-bottom: 30rpx;
		}
		.comment-item {
			margin-bottom: 30rpx;
			line-height: 40rpx;
			.thumb-view {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.name {
					font-size: 28rpx;
					font-weight: 700;
				}
				.option-item {
					display: flex;
					align-items: center;
					margin: 0 20rpx;
					font-size: 24rpx;
					color: $uni-text-color-grey;
				}
			}
			
			.content {
				font-size: 24rpx;
				font-weight: 700;
			}
			.bottom-view {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				.delect {
					color: #d81e06;
					
				}
				.time {
					margin-right: 30rpx;
					color: #333;
				}
			}
			
		}
	}
.commentInputView{
	width: 100%;
	background-color: #eee;
	position: fixed;
	/*bottom: 60px;*/
	bottom: 0;
	left: 0;
	z-index: 99999;
	.commentInput {
		padding: 20rpx 20rpx;
	}
	.submit {
	    width: 135rpx;
	    height: 70rpx;
	    border-radius: 10rpx;
	    background: #d81e06;
	    color: #fff;
	    text-align: center;
	    line-height: 70rpx;
	    display: inline-block;
	    font-size: 28rpx;
	    padding: 0;
		margin-left: 10rpx;
	  }
  }
</style>